<script lang="ts" setup>
import { useScrollStore } from '@/stores/scroll'

const route = useRoute()
const scrollbarRef = ref()
const scrollStore = useScrollStore()

onMounted(() => {
  scrollStore.scroll.scrollRef = scrollbarRef.value
})
</script>

<template>
  <el-container class="use-theme w-screen h-screen use-transitions-colors">
    <el-aside class="!w-60 !h-full">
      <AdminAside />
    </el-aside>
    <el-container class="w-full pb-5">
      <el-header>
        <AdminHeader />
      </el-header>
      <el-scrollbar ref="scrollbarRef" class="!scroll-smooth">
        <Transition appear name="admin">
          <div :key="route.fullPath" class="min-w-[1200px] h-fit">
            <RouterView v-slot="{ Component }" name="admin">
              <component :is="Component" />
            </RouterView>
          </div>
        </Transition>
      </el-scrollbar>
    </el-container>
  </el-container>
</template>

<style lang="scss"></style>
